Mui 02 快速上手开发一个 UX 设计稿

所需组件

@mui/material

AppBar 制作 Header
Grid 栅格布局
Card 卡片, 块状结构(里面可以放: 图片, 按钮, 文字)

@mui/icons-material

各种内置按钮图控件, 在 https://mui.com/components/material-icons/#main-content 查找需要的 icon

@mui/styles

makeStyles, withStyles

Grid 栅格排版

Grid 将页面元素宽度平均分成 12 份, 每个 grid 认领占位份数

按 breakpoints 或更宽屏幕定义如何设置元素宽度: xs, sm. md, lg, xl

1 2	// `xs 极小` 的时候占 12 格, `sm 小` 或更宽的时候占 8 个格 <Grid item xs={12} sm={8}>

Grid 分为 container 和 item, 二者可以嵌套组合

// Grid
<Grid container sppacing={2}>
  <Grid item>...</Grid>
</Grid>

默认 direction=”column” 左中右布局

AppBar 网站头

涉及元素

Toolbar
Typography

Card 卡片

涉及元素

CardHeader
CardMedia
CardContent
CardAction
Avatar
IconButton 放在 Icon 组件外, 让组件可点击
Button

Jss 的运用

class component

定义 jss 函数: const useStyle = (theme) => ({ class名: {css内容} })
注入 jss: export default withStyles(useStyle)(ClassName)
引用 jss: const {classes} = this.props, className={classes.class名}

function component

定义 jss 函数: const useStyle = makeStyles((theme) => ({ class名: {css内容} }))
render 方法内引用 jss: const classes = useStyle();, className={classes.class名}

每次编译, 都会根据 jss 生成独特的 class name:

系统 class name 共有: .MuiXXX-xxx, 例如: .MuiButton-root
使用 makeStyles 生成的 class name: .makeStyles-className-randNumber

传 props 参数

传入参数: const classes = useStyles(props);

css 值直接使用函数: color: (props) => (props.light ? "white" : "black")
class name 直接使用函数 className: (props) => ({ return {color: ..., background: ...}; });

使用 theme

区别 props 参数

定义 makeStyles 的时候使用函数, 传入 theme 作为参数
定义 className 对应内容, 元素 style 的时候使用函数, 传入 props

const useStyles = makeStyles((theme) => ({
  className: (props) => {
    return {
      color: props.cool ? "red" : "green",
      [theme.breakpoints.up("sm")]: "cyan",
    };
  },
}));

表示 颜色 根据参数使用 red/green, 但是宽度大于等于 sm 的时候, 使用 cyan

使用多个 class name 组合

1	yarn add classnames

1
2
3

import classNames from "classnames"

className={classNames(classA, classB)}

其他知识

解构传参 <Item {...params}>

CSS

flex: "", justifyContent: "": 浮动的使用
color: "": 设置字体颜色